<template>

  <n-form-item label="跳转类型" :path="component.type" class="creative-component-form-item"
    :show-feedback="form.page_type !== 'PAGE_TYPE_WECHAT_CANVAS' || !head_optional.length">
    <div class="flex-1">
      <!-- {{ form.page_type }} -->

      <n-radio-group v-model:value="form.page_type">
        <n-radio-button v-for="item in enumeration" :key="item.value" :value="item.value">{{ item.label
          }}</n-radio-button>
      </n-radio-group>
    </div>
  </n-form-item>
  <n-form-item :show-label="false" v-if="head_optional.length" :path="component.type"
    :rule="formRule.override_canvas_head_option" class="mt-5" :show-require-mark="true">
    <n-radio-group v-model:value="form.override_canvas_head_option">
      <n-radio v-for="item in head_optional" :key="item.value" :value="item.value">{{ item.label }}</n-radio>
    </n-radio-group>
  </n-form-item>


</template>

<script setup lang="ts">
import { computed, onBeforeMount, reactive, ref, toRef, unref, watch, h } from 'vue';
import { useStore } from '@/store';
import Component from '@/store/modules/adv/component';
import { NSwitch, NRadioGroup, NRadioButton, NRadio, NModal, NButton, NSelect, NImage } from 'naive-ui';
import {
  NFormItem,
} from 'naive-ui';
import { useJumpInfoEnumeration } from '@/store/modules/adv/hooks/useEnumeration'
const store = useStore();



const market = computed(() => store.state.adv.modal.market);
const isWechatChannelsLive = computed(() => market.value.marketingTargetType == 'MARKETING_TARGET_TYPE_WECHAT_CHANNELS_LIVE');
const props = withDefaults(defineProps<{
  component: Component
  path: Array<any>
}>(), {});



const { enumeration } = useJumpInfoEnumeration({
  adv: computed(() => store.state.adv.modal)
});

const head_optional = computed(() => {
  const _enum = enumeration.value.find((_enum: any) => _enum.value === form.page_type);
  return _enum?.head_option || []
})
const component = toRef<any, any>(props, 'component');
const form = reactive({
  page_type: component.value.value.page_type || 'PAGE_TYPE_WECHAT_MINI_PROGRAM',
  // 原生推广页才开启的配置
  override_canvas_head_option: component.value.value.page_spec && component.value.value.page_spec.wechat_canvas_spec ? component.value.value.page_spec.wechat_canvas_spec.override_canvas_head_option : undefined
});

const formRule = reactive({
  override_canvas_head_option: {
    required: true,
    trigger: 'blur',
    validator(_, __) {
      console.log('----', form.override_canvas_head_option);
      if (!form.override_canvas_head_option) {
        return new Error('请选择替换形式!')
      }
      return true;
    }
  },
})

store.commit('adv/UPDATE_ADV_TARGET_VALUE', {
  path: ['marketComponents', props.component.type],
  key: 'value',
  value: Object.assign({}, form)
})
watch(form, () => {
  // console.log('change', form, props.component.type)
  store.commit('adv/UPDATE_ADV_TARGET_VALUE', {
    path: ['marketComponents', props.component.type],
    key: 'value',
    value: Object.assign({}, form)
  })
})















</script>

<style scoped lang="scss">
@import url('./style.scss');
</style>
